<template>
  <div>
    <el-card class="box-card">
      <!-- 表单 -->
      <el-row type="flex" justify="space-between" align="top" class="formdate">
        <el-form ref="form" :model="form" :inline="true">
          <el-form-item prop="tag_name">
            <el-input
              v-model="form.tag_name"
              placeholder="标签名称"
              size="small"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="form.subject_id"
              size="small"
              placeholder="归属学科"
              @change="clickItem"
            >
              <el-option v-for="item in subjectTree" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="directory_id">
            <el-select
              v-model="form.directory_id"
              size="small"
              placeholder="归属目录"
            >
              <el-option v-for="item in nowSubChildren[0].children" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item><el-form-item prop="is_show">
            <el-select
              v-model="form.is_show"
              size="small"
              placeholder="显示状态"
            >
              <el-option label="显示" value="1" />
              <el-option label="隐藏" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              plain
              size="small"
              @click="getUserINfoByxxx"
            >查询</el-button>
            <el-button size="small" @click="restClear">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- /表单 -->
        <!-- 右侧按钮 -->
        <div>
          <el-button type="primary" plain size="medium" @click="$refs.addSubJect.showDialog=true">
            创建标签
          </el-button>
        </div>
      <!-- /右侧按钮 -->
      </el-row>
      <!-- 表格主体 -->
      <el-table :data="subjectTags" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="tag_name" label="标签名称" />
        <el-table-column prop="directory_name" label="归属目录" />
        <el-table-column prop="subject_name" label="归属学科" />
        <el-table-column prop="username" label="创建人" align="center" />
        <el-table-column prop="is_show" label="是否显示" align="center">
          <!-- <el-switch v-model="value" active-color="#409eff" /> -->
          <template slot-scope="{row}">
            <el-switch
              :value="row.is_show"
              :active-value="1"
              :inactive-value="2"
              @change="switchChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="editSubject(row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delSubjectTag(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格主体 -->

      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[1,3,5,10]"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <add-sub-ject ref="addSubJect" :subject-tree="subjectTree" :now-sub-children="nowSubChildren" />
  </div>

</template>

<script>

import { getSubjectTags, updateStatus, delSubjectTag, getSubjectTree, getSubject } from '@/api/tagInfo'
import addSubJect from './components/addSubJect.vue'
export default {
  name: 'TagInfo',
  components: { addSubJect },
  props: {},
  data() {
    return {
      form: {
        directory_id: '', // 当前目录
        subject_id: '', // 当前学科
        tag_name: '', // 标签名称
        is_show: ''// 状态

      },
      subjectTree: [],
      nowSubChildren: [{
        children: []
      }], // 当前选择学科的子级
      subjectTags: [], // 标签信息列表
      number: 60, // 头像大小
      page: {
        page: 1, // 当前页码
        total: 0, // 总数
        limit: 10// 限制条数
      }
    }
  },
  computed: {},

  watch: {},

  created() {
    this.getSubjectTags()
    this.getSubjectTree()
    this.getpushToTag()
  },

  mounted() {},

  methods: {
    async getSubjectTags() { // 获取标签信息列表
      const { data } = await getSubjectTags(this.page)
      this.subjectTags = data.list
      this.page.total = data.total
      this.page.currentPage = data.page
    },
    async switchChange(row) { // 开关切换事件
      var num = row.is_show * 1 === 1 ? 2 : 1
      await updateStatus({ id: row.id, is_show: num })
      row.is_show = num
      this.$message.success('更新用户状态成功')
    },
    handleCurrentChange(val) { // val是最新页码数
      this.page.page = val
      // 判断搜索表单是否有数据存在,如果表单内有数据存在，分页切换时要请求的是筛选后的结果
      this.getSubjectTags()
    },
    handleSizeChange(val) { // 最新页显示条数
      this.page.limit = val
      this.getSubjectTags()
    },
    async delSubjectTag(id) { // 删除管理员
      if (this.subjectTags.length === 1 && this.page.page !== 1) {
        this.page.page--
      }
      await this.$confirm('确定删除吗，是否继续')
      await delSubjectTag(id)
      this.$message.success('删除成功')
      this.getSubjectTags()
    },
    async editSubject(id) { // 编辑事件
      const { data } = await getSubject(id)
      this.$refs.addSubJect.ruleForm = data
      this.$refs.addSubJect.showDialog = true

      this.nowSubChildren = this.subjectTree.filter(item => {
        if (item.id === data.subject_id) {
          console.log(item)
          return item
        }
      })
    },
    async getUserINfoByxxx() { // 条件查询
      const { data } = await getSubjectTags({ ...this.form, page: this.page.page, limit: this.page.limit })
      this.subjectTags = data.list
      this.page.total = data.total
      this.page.currentPage = data.page
    },
    restClear() { // 筛选表单重置时间
      this.form = {
        directory_id: '', // 当前目录
        subject_id: '', // 当前学科
        tag_name: '', // 标签名称
        is_show: ''// 状态
      }
      this.getSubjectTags()
    },
    async getSubjectTree() { // 获取学科数
      const { data } = await getSubjectTree()
      this.subjectTree = data
    },
    clickItem() { // 选择框发生改变触发事件
      this.form.directory_id = null
      this.nowSubChildren = this.subjectTree.filter(item => {
        if (item.id === this.form.subject_id) {
          return item
        }
      })
    },
    // 目录跳转到学科页面的的筛选,重要1！！！！！！
    async getpushToTag() {
      // console.log('跳转')
      // 1.接收目录页通过url传递的subject_id,赋值给form表单
      this.form.subject_id = this.$route.query.subject_id
      // 2.获取归属学科和归属目录的数据，重新赋值
      const { data } = await getSubjectTree()
      this.subjectTree = data
      // 3.数据处理：根据subject_id筛选出归属学科和归属目录的数据,抽取里面的值
      this.nowSubChildren = this.subjectTree.filter(item => {
        if (item.id === this.form.subject_id) {
          console.log(item)
          return item
        }
      })
      // console.log(this.$route.query.subject_id)
      this.form.directory_id = this.$route.query.directory_id
      this.getUserINfoByxxx()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 20px;
}
</style>
